<script setup>
defineProps({
  user: {
    type: Object,
    required: true,
  },
})
</script>

<template>
  <AppCard bordered>
    <div class="mobile-hidden h-160 h-full flex items-center border-rd-5 p-20">
      <div class="mobile-hidden mr-20 f-c-c">
        <el-avatar :size="90" class="delayed-rotate" :src="user.avatar" />
      </div>
      <div class="mobile-hidden h-full flex-col flex-1 py-8">
        <div class="line-clamp-1">
          <span class="font-size-22 fw-black">
            {{ user.nickName }}
          </span>
        </div>
        <div class="mobile-hidden flex-col flex-1 justify-center gap-6 op-text">
          <span class="flex items-center font-size-14">
            <i class="i-fe:briefcase mr-10" />
            cv攻城狮
          </span>
          <span class="font-size-14">突破想象，成就非凡！</span>
        </div>
      </div>
    </div>
  </AppCard>
</template>

<style scoped>
@media (max-width: 800px) {
  .mobile-hidden {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
}
</style>
